<template>
  <!-- 已弃用 -->
  <div class="writeContent">
    <el-card>
      <el-page-header @back="router.back()">
        <template #content>
          <span class="text-large font-600 mr-3" style="color: #fff;"> {{ route.query.title }} </span>
        </template>
      </el-page-header>
    </el-card>
    <div class="writeMain">
      <el-card style="background: black;">
        <div
          class="tablet"
        >
          <el-button type="danger" style="margin-bottom: 10px;" @click="clear">清空</el-button>
          <canvas
            ref="tablet"
            @touchstart="onStart"
            @touchmove="onMove"
            @touchend="onEnd"
            @mousedown="onStart"
            @mouseup="onEnd"
            @mousemove="onMove"
          />
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'

const route = useRoute()
const router = useRouter()

const write = ref<string>('')

interface Event {
  touches: TouchList;
  clientX: number;
  clientY: number;
  preventDefault: Function;
}

const ratio = window.devicePixelRatio || 1;

let canvas!: HTMLCanvasElement;
let ctx!: CanvasRenderingContext2D;
let writing = false;

const tablet = ref<HTMLCanvasElement>();

/**
 * @describe 将payload转换成坐标，主要用于兼容PC跟WAP
 */
const coord = (payload: Partial<Event>) => {
  const { touches, clientX = 0, clientY = 0 } = payload
  if (touches && touches.length) {
    const { clientX, clientY } = touches[0]
    return {
      clientX,
      clientY,
    }
  }
  return { clientX, clientY }
}

/**
 * @describe 落笔
 */
const onStart = (payload: Partial<Event>) => {
  writing = true;
  const { clientX, clientY } = coord(payload);
  ctx.beginPath();
  // ctx.moveTo(clientX * ratio, clientY * ratio);
  ctx.moveTo(clientX, clientY);
  ctx.lineCap = 'round'
  ctx.lineJoin = 'round'
};

/**
 * @describe 运笔
 */
const onMove = (payload: Partial<Event>) => {
  if (!writing) {
    return
  }
  const { clientX, clientY } = coord(payload);
  // ctx.lineTo(clientX * ratio, clientY * ratio);
  ctx.lineTo(clientX, clientY);
  ctx.lineWidth = 3 * ratio;
  ctx.stroke();
  payload.preventDefault?.()
};

/**
 * @describe 提笔
 */
const onEnd = () => {
  writing = false
};

const confirm = () => {
  return canvas.toDataURL()
};

const clear = () => {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = "#ffffff";
  ctx.fillRect(0, 0, canvas.width * ratio, canvas.height * ratio);
};

defineExpose({ confirm, clear });

onMounted(() => {
  canvas = tablet.value as HTMLCanvasElement;
  canvas.width = 1000 * ratio;
  canvas.height = 500 * ratio;

  ctx = canvas.getContext("2d") as CanvasRenderingContext2D;
  ctx.fillStyle = '#ffffff'
  ctx.fillRect(0, 0, canvas.width * ratio, canvas.height * ratio);
})

</script>

<style lang="scss" scoped>
.writeContent {
  width: 100%;

  .el-card {
    border-radius: $base-card-border-radius;
  }

  .writeMain {
    margin-top: 20px;
    padding: 20px;

    .el-card {
      border-radius: 16px;
      box-shadow: 0px 4px 18px 0px rgba(248,216,82, 0.9);
      .tablet {
        canvas {
          width: 100%;
          height: 100%;
        }
      }
    }
  }

}
</style>